<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .time {
            display: inline-block;
            position: relative;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }

        div::after {
            position: absolute;
            left: 0px;
            content: "";
            width: 50px;
            height: 50px;
            border: 1px solid #09f;
            border-radius: 50%;
            animation: clipCircle 4s linear 0s 1 forwards;
        }

        @keyframes clipCircle {
            0% {
                transform: rotateZ(90deg);
                clip: rect(0px 0px 52px 0px);
            }

            100% {
                transform: rotateZ(270deg);
                clip: rect(0px 52px 52px 0px);
            }
        }
    </style>
</head>

<body>
    <div>
        <span class="time" id="time">10</span>
    </div>
    <script>
        var time = document.getElementById('time');
        count(0);

        function count(num) {
            time.innerHTML = num + '%';
            if (num < 100) {
                setTimeout(function () {
                    count(++num);
                }, 40)
            }
        }
    </script>
</body>

</html>